<template>
  <div class="yygh_search re">
    <ul class="fl" @mouseenter="mouseenterMenu" @mouseleave="mouseleaveMenu" ref="menuList">
      <li v-for="(value,index) in menu"  :key="index" @click="clickMenu">
        <router-link :to="value.path" :class="{ hover:index == active }">{{value.name}}</router-link>
      </li>
    </ul>
    <ul class="fl">
      <!-- <li class="t0 shopping-cart">
        <router-link to="/mall/shopping-cart">
        <i class="iconfont icon-gouwuche"></i>
        购物车
        <span class="shopping-cart-num">3</span>
        </router-link>
      </li> -->
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      input: '',
      active: this.activeitem
    }
  },
  props: {
    menu: {
      default () {
        return [
          // {name: '健康常识', path: '/info'},
          // {name: '养生', path: '/info'},
          // {name: '减肥', path: '/reduce'},
          // {name: '美容', path: '/info'},
          // {name: '母婴', path: '/info'},
          // {name: '慢病', path: '/info'},
          // {name: '我的订单', path: '/mall/orders'},
          // {name: '物流查询', path: '/mall/express'}
        ]
      }
    },
    showsearch: {
      default () {
        return true
      }
    },
    activeitem: {
      default () {
        return 0
      }
    }
  },
  mounted () {
    let _this = this
    document.onclick = function () {
      _this.input = ''
    }
  },
  methods: {
    emitSearch () {
      this.$emit('search', this.input)
    },
    mouseenterMenu(e){
      let menuList = this.$refs.menuList
      menuList.style.height = 'auto';
    },
    mouseleaveMenu(e){
       let menuList = this.$refs.menuList
      menuList.style.height = '42px';
    },
    clickMenu(){
      let menuList = this.$refs.menuList
      menuList.style.height = '42px';
    }
  }
}
</script>

<style scoped>
a{
  color: #fff;
}
a:hover{
  color: #333;
}
</style>
